<template>
  <div>
    <a-card title="推荐阅读" :head-style="headStyle" :body-style="bodyStyle">
      <router-link to="/" class="recom-card">
        <div class="blog-title">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</div>
        <div class="blog-type">分类：<a-tag color="green">前端</a-tag></div>
        <div class="blog-bottom">
          <div class="blog-time">2019-12-25 17:54:15</div>
          <div class="blog-meta">
            <a-icon type="eye" /> 0
            <a-icon type="heart" /> 0
            <a-icon type="like" /> 0
            <a-icon type="message" /> 0
          </div>
        </div>
      </router-link>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headStyle: {
        fontSize: '18px',
        fontWeight: 'bold',
        lineHeight: '15px',
        borderLeft: '5px solid #409eff'
      },
      bodyStyle: {
        maxHeight: '530px',
        overflow: 'hidden'
      }
    }
  }
}
</script>

<style scoped>
.recomment-card {
  max-height: 500px;
  overflow: hidden;
}
.ant-card-bordered {
  border: none !important;
}

a {
  display: flex;
  flex-direction: column;
  color: #3e4149;
}

a:hover {
  color: #3e4149;
}

.blog-title {
  font-size: 16px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-type {
  line-height: 40px;
}

.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #b8b8b8;
  margin-bottom: 2px;
}

</style>
